<template>
  <div>
      <div class="payyi">
           <van-icon name="arrow-left" @click="fun()"  class="iconyi"/>
           <span>确认购买</span>
           <div class="daifu">代付</div>
      </div>
      <div class="payer">
<div class="paynei">商品信息</div>
<div class="paytu">
    <div class="paytul">
        <img src="../../../public/found/wx1.jpg" alt="">
    </div>
    <div class="paytur">
        <p>大厂算法面试真题解析32讲</p>
        <span>￥68.00</span>
    </div>
</div>
      </div>
      <div class="payyh">
         <form action="">
            优惠券 <span>0张可用</span> <input type="checkbox">
            <br>
            优惠码 <span>兑换&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;    >></span> <input type="checkbox">
         </form>
         <p>同一订单中，优惠码与优惠券只能二选一</p>
      </div>
      <div class="payjine">
         <p>商品金额 <span>￥68.00</span> </p>
         <p>限时优惠 <span>-￥19.00</span> </p>
     </div>
      <div class="payye">
         <p>支付方式</p>
         <p>余额 <span>0.00(不足支付)</span> </p>
     </div>
     <div class="payhs">
         <p>你将在该ios设备进行虚拟币充值及消费;</p>
         <p>充值余额仅限ios系统消费,无法在其他系统使用;</p>
         <p>充值余额和消费不可转让,退换和申请发票!</p>
     </div>
     <div class="paydibu">
         <div class="paydibul">实付<span> 49.00</span></div>
         <div class="paydibur">充值并购买</div>

     </div>
  </div>
</template>

<script>

export default {
methods:{
    fun(){
        this.$router.go(-1)
    },
}
}
</script>

<style scoped>
.payyi{
    width: 3.4rem;
    height: 0.51rem;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.iconyi{
    font-size: 0.25rem;
    line-height: 0.51rem;
}
.payyi span{
    font-size: 0.21rem;
    font-weight: bold;
    line-height: 0.51rem;
}
.payyi .daifu{
    font-size: 0.12rem;
    padding-top: 0.26rem;
    
}
.payer{
    width: 3.4rem;
    height: 1.4rem;
    /* background-color: pink; */
    margin: auto;
}
.paytul{
    padding-top: 0.3rem;
}
.paytul img{
width: 0.69rem;
height: 0.7rem;
float: left;

}
.paytur{
    width: 2.62rem;
    height: 0.73rem;
    float: right;
padding-top: 0.3rem;
    
}
/* .paytur p{
font-size: 0.15rem;

} */
.paytur span{
    /* font-size: 0.11rem; */
    color: #ab716d;
}
.payyh{
    width: 3.47rem;
    height: 0.5rem;
    margin: auto;
    /* background-color: aqua; */
}
form span{
    font-size: 0.12rem;
    padding-right: 1.9rem;
}
.payyh p{
    font-size: 0.11rem;
}
.payjine{
    padding-top: 0.3rem;
     width: 3.47rem;
    height: 0.5rem;
    margin: auto;
}
/* .payjine p{
font-size: 0.13rem;
} */
.payjine span{
font-size: 0.11rem;
padding-left: 2.3rem;
}
.payye{
     padding-top: 0.3rem;
     width: 3.47rem;
    height: 0.5rem;
    margin: auto;
}
.payye span{
    color: red;
}
.payhs{
    width: 3.47rem;
    height: 1.13rem;
    background-color: #f7f8fc;
    margin: auto;
    margin-top: 0.9rem;
}
.payhs p{
    color: #bebfc3;
}
.paydibu{
    width: 3.47rem;
    height: 0.5rem;
    margin: auto;
    padding-top: 0.5rem;
    display: flex;
    justify-content: space-between;
}
.paydibul{
    width: 2.31rem;
    height: 0.5rem;
    line-height: 0.5rem;
}
.paydibul span{
    color: red;
    line-height: 0.5rem;
}
.paydibur{
    width: 1.15rem;
    height: 0.5rem;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 0.5rem;
}
</style>